<script lang="ts" setup>
import to from 'await-to-js'
import Detail from './detail.vue'
import { getUserList, deleteUser } from '@system/api/system/user'
import OneTable from '@/component/public/table/oneTable.vue'
import type { UserInfo, HandleType } from './data'

defineOptions({
  name: 'TableList'
})

const defaultForm = () => {
  return {}
}
const tableData = ref<UserInfo[]>([])
const total = ref(0)
const tableRef = ref()
const loading = ref(true)
const searchForm = ref<any>(defaultForm())
const isDialog = ref(false)
const currentRow = ref<UserInfo>()
const type = ref<HandleType>('add')

function searchTable() {
  tableRef.value?.resetPage()
}
function resetTable() {
  searchForm.value = defaultForm()
  searchTable()
}
const getList = async (val: UserInfo) => {
  let params = { ...val, ...searchForm.value }
  tableData.value = []
  loading.value = true
  const [err, res] = await to(getUserList(params))
  loading.value = false
  if (err) return
  tableData.value = res.object?.list || []
  total.value = res.object?.total || 0
}

const handle = (currentType: HandleType, row?: UserInfo) => {
  currentRow.value = row
  type.value = currentType
  isDialog.value = true
}

const handlleDelete = async (row: UserInfo) => {
  const [confirm] = await to(
    ElMessageBox.confirm(`是否删除该用户?`, '温馨提示', {
      type: 'warning',
      draggable: true
    })
  )
  if (confirm) return
  const [err] = await to(deleteUser(row.id))
  if (err) return
  ElMessage.success('删除成功')
  searchTable()
}

const closeDialog = (search: Boolean) => {
  isDialog.value = false
  search && searchTable()
}

const handleExport = () => {}
</script>

<template>
  <div class="app-container">
    <div class="d-header">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="登录用户名:">
          <el-input v-model="searchForm.userId" placeholder="登录用户名" @change="searchTable()"></el-input>
        </el-form-item>
        <el-form-item label="手机号:">
          <el-input v-model="searchForm.phoneNo" placeholder="手机号" @change="searchTable()"></el-input>
        </el-form-item>
        <el-form-item label="邮箱:">
          <el-input v-model="searchForm.email" placeholder="邮箱" @change="searchTable()"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchTable()" icon="Search">查询</el-button>
          <el-button @click="resetTable" icon="Refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="d-content">
      <div class="action">
        <el-button type="primary" plain @click="handle('add')" icon="CirclePlus">新建</el-button>
        <el-button plain icon="Download" @click="handleExport()">导出</el-button>
      </div>
      <one-table ref="tableRef" :data="tableData" :total="total" border :loading="loading" @update="getList" row-key="id">
        <el-table-column type="index" label="序号" align="center" width="60" />
        <el-table-column prop="userId" label="登录用户名" align="center" show-overflow-tooltip>
          <template #default="{ row }">
            <el-link type="primary" @click="handle('detail', row)" :underline="false">{{ row.userId }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="phoneNo" label="手机号 " align="center" show-overflow-tooltip />
        <el-table-column prop="email" label="邮箱" align="center" show-overflow-tooltip />
        <el-table-column prop="username" label="姓名" align="center" show-overflow-tooltip />
        <el-table-column prop="roleNamesStr" label="用户角色" align="center" show-overflow-tooltip />
        <el-table-column prop="lastLoginTime" label="最后登录时间" align="center" show-overflow-tooltip />
        <el-table-column label="是否启用" align="center" width="100" show-overflow-tooltip>
          <template #default="{ row }">
            <el-tag :type="row.isDisabled === 0 ? '' : 'danger'">
              {{ row.isDisabled === 0 ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="operator" label="操作" width="140px" align="center" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" size="small" icon="Edit" @click="handle('edit', row)">修改</el-button>
            <el-button link @click="handlleDelete(row)" type="danger" size="small" icon="Delete">删除</el-button>
          </template>
        </el-table-column>
      </one-table>
    </div>
    <Detail v-if="isDialog" :currentRow="currentRow" :type="type" @close="closeDialog" />
  </div>
</template>

<style scoped lang="scss"></style>
./data
